<template>
  <div>
    <div
      class="popContainer"
      @touchmove.prevent
      @click="close()"
      v-show="drawer"
    ></div>
    <transition name="el-zoom-in-top">
      <div class="Box" v-show="drawer">
        <div class="Main">
          <div class="head">
            <div class="headname">{{ Frienddata.name }}</div>
            <el-divider></el-divider>
          </div>
          <div class="contents" id="chatRecord">
            <div v-for="(item, index) in chatdata" :key="index">
              <div class="OtherMessage" v-if="item.issend == item.friend_id">
                {{ item.chat_content }}
                <div class="time">{{ item.chat_content_time | timeF }}</div>
              </div>
              <div class="myMessage" v-else>
                {{ item.chat_content }}
                <div class="time">{{ item.chat_content_time | timeF }}</div>
              </div>
            </div>
          </div>
          <div class="Bottominputs">
            <el-divider></el-divider>
            <div class="inputslay">
              <div class="inputs">
                <el-input
                  v-model="input"
                  placeholder="请输入要留言的内容"
                ></el-input>
              </div>
              <el-button :disabled="input == ''" @click="send()"
                >发送</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { get_Chat, sendMessage } from "../../api/Chat.js";
import { get_user_info } from "../../api/user_login";

import { put_friend } from "../../api/friend.js";
import { formatDateTime } from "../../common/Time";

export default {
  name: "message",
  data() {
    return {
      drawer: false,
      input: "",
      time: new Date(),
      list: 4,
      FriendID: "",
      chatdata: [],
      myID: this.$store.getters.userInfo._id,
      Frienddata: []
    };
  },
  filters: {
    timeF(val) {
      return formatDateTime(Date.parse(val));
    }
  },
  updated() {
    // 聊天定位到底部
    let ele = document.getElementById("chatRecord");
    ele.scrollTop = ele.scrollHeight;
  },

  methods: {
    close() {
      this.drawer = false;
      put_friend({
        query: {
          user_id: this.myID,
          friend_id: this.FriendID
        },
        update: { Unread_number: 0 }
      })
        .then(res2 => {
          console.log("未讀信息清零", res2.data);
        })
        .catch(err => {
          console.log("未添加好友", err);
        });
      if (this.$route.path == "/personalCenter") {
        this.$emit("getdata");
      }
    },
    open(val) {
      console.log(val, "传过来的用户——id");
      this.FriendID = val;
      this.drawer = true;
      this.getChat();
    },
    async getChat() {
      var Frienddata = await get_user_info({ query: { _id: this.FriendID } });
      this.Frienddata = Frienddata.data[0];
      this.drawer = true;
      var reqdata = {
        query: {
          user_id: this.myID,
          friend_id: this.FriendID
        },
        count: true,
        sort: { _id: 1 }
      };
      var chatdata = await get_Chat(reqdata);
      this.chatdata = chatdata.data;
      console.log(this.chatdata, "聊天信息");
    },
    send() {
      var data = {
        user_id: this.myID,
        friend_id: this.FriendID,
        liaoTianContent: this.input,
        chat_content_time: new Date()
      };
      console.log(data);
      sendMessage(data).then(res => {
        console.log(res);
        this.input = "";
        this.getChat();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.Box {
  position: fixed;
  top: 0;
  right: 0;
  width: 500px;
  height: 100%;
  z-index: 1100;
  background-color: #ffffff;
  .Main {
    width: 100%;
    height: 100%;
    position: relative;
    .head {
      position: absolute;
      top: 0;
      width: 100%;
      .headname {
        width: 100px;
        height: 10px;
        margin: 20px 0 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .contents {
      position: absolute;
      width: 100%;
      top: 60px;
      bottom: 100px;
      overflow: auto;
      .OtherMessage {
        width: 250px;
        margin: 10px;
        padding: 10px;
        background-color: rgb(187, 187, 187);

        float: left;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        .time {
          font-size: 12px;
        }
      }
      .myMessage {
        width: 250px;
        margin: 10px;
        padding: 10px;
        float: right;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        .time {
          font-size: 12px;
        }
      }
    }
    .Bottominputs {
      width: 100%;
      position: absolute;
      height: 100px;
      bottom: 0;
      .inputslay {
        display: flex;
        justify-content: space-around;
        .inputs {
          width: 300px;
        }
      }
    }
  }
}
div.popContainer {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}
</style>
